<script setup lang='ts'>
import Go from '@fl/assets/svgs/go.svg'
import { Logo } from '@fl/components'
</script>

<template>
    <div class="pt-60 mx-auto my-0 h-390 w-1300">
        <el-row>
            <div class="!h-[var(--logo-height)]'] mb-41 decoration-none flex flex-none relative cursor-pointer overflow-hidden items-center">
                <Logo :size="40" />

                <img :src="Go">
            </div>
        </el-row>

        <el-row :gutter="20">
            <el-col :span="4">
                <div class="text-14 c-#AAAAAA">
                    安居链基于地产行业领先的集采价格优势、40余年建
                    材供应链管理经验，建立公开透明、优质低价、便捷高效
                    的交易模式和资源共享平台。安居链整合产业链上下游资
                    源，将产品质量、服务能力、管控标准、大数据、资本能
                    力真实沉淀，打造中国建材产业互联共赢生态平台。
                </div>
            </el-col>

            <el-col :span="10"
                    :offset="2"
            >
                <div class="text-14 flex gap-10">
                    <div class="text-center">
                        <div class="mb-16 text-16 text-#000 font-600">
                            如何入驻
                        </div>

                        <ul class="text-#666 text-left">
                            <li>线上注册</li>

                            <li>企业认证</li>
                        </ul>
                    </div>

                    <div class="text-center">
                        <div class="mb-16 text-16 text-#000 font-600">
                            如何下单
                        </div>

                        <ul class="text-#666 text-left">
                            <li>下单流程</li>

                            <li>订单状态</li>
                        </ul>
                    </div>

                    <div class="text-center">
                        <div class="mb-16 text-16 text-#000 font-600">
                            如何支付
                        </div>

                        <ul class="text-#666 text-left">
                            <li>网上支付</li>

                            <li>银行转账</li>
                        </ul>
                    </div>

                    <div class="text-center">
                        <div class="mb-16 text-16 text-#000 font-600">
                            售后服务
                        </div>

                        <ul class="text-#666 text-left">
                            <li>如何换货</li>
                        </ul>
                    </div>

                    <div class="text-center">
                        <div class="mb-16 text-16 text-#000 font-600">
                            加入安居链
                        </div>

                        <ul class="text-#666 text-left">
                            <li>入驻安居链</li>
                        </ul>
                    </div>

                    <div class="text-center">
                        <div class="mb-16 text-16 text-#000 font-600">
                            关于安居链
                        </div>

                        <ul class="text-#666 text-left">
                            <li>关于我们</li>

                            <li>隐私政策</li>

                            <li>新闻中心</li>
                        </ul>
                    </div>
                </div>
            </el-col>

            <el-col :span="8">
                <div class="text-16 c-#aaa flex justify-between">
                    <div class="text-center">
                        <div class="mb-10 bg-red h-100 w-100">
                            <img src="https://public-obs-cdn.anjulian.com.cn/2024-06-14/9a7c49af-e179-4ba5-8e78-edaf76aff3d9.jpg"
                                 alt="安居链小程序"
                            >
                        </div>

                        <div>安居链小程序</div>
                    </div>

                    <div class="text-center">
                        <div class="mb-10 bg-red h-100 w-100">
                            <img src="https://public-obs-cdn.anjulian.com.cn/2024-06-14/00b86881-7dc5-4001-b204-6676fabdb484.jpg"
                                 alt="安居链公众号"
                            >
                        </div>

                        <div>安居链公众号</div>
                    </div>

                    <div class="text-center">
                        <div class="mb-10 bg-red h-100 w-100">
                            <img src="https://public-obs-cdn.anjulian.com.cn/2024-06-14/110e53c2-e302-47bb-a8f3-0a42d16ea012.jpg"
                                 alt="安居链APP"
                            >
                        </div>

                        <div>安居链APP</div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>

    <div class="bg-#222 h-110 w-100%">
        <div class="mx-auto text-14 text-#fff h-100% w-1300 justify-center">
            <div class="py-12 c-#FFF">
                <span class="mr-24">商城首页</span>

                <span class="line mr-24 relative">关于我们</span>

                <span class="line relative">新闻中心</span>
            </div>

            <div class="c-#767676">
                <span class="mr-20">©Copyright 2024</span>

                <span class="mr-20">武汉安居供应链有限公司</span>

                <span>鄂ICP备2023030090号</span>
            </div>
        </div>
    </div>
</template>

<style scoped>
.line::before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 12px;
    position: absolute;
    top: 4px;
    left: -12px;
    background: #fff;
}

.footer-logo {
    background: url('https://public-obs-cdn.anjulian.com.cn/2024-05-28/1fcfec2a-1d97-4953-9957-d3968c3e54c8.png')
        0% 0% / 100% 100% no-repeat;
}

li {
    margin-bottom: 8px;
    cursor: pointer;
}
</style>
